<template>
	<div class="bookmarksClassList">

		<BookmarksClassEdit :editBookmarksCategory="editBookmarksCategory" :visible="visible"
			@onClose="visible = false" @onSubmit="amendBookmarksCategory">

		</BookmarksClassEdit>

		<a-button class="editable-add-btn" style="margin-bottom: 8px" @click="addCategory">创建分类</a-button>
		<a-table rowKey="cid" :columns="columns" :data-source="treeData" :row-selection="rowSelection">
			<template v-slot:title="{text,record}">
				<div style="display: inline-block;" v-if="dataText === text">
					<a-input :value="editableData.title" @input="amendCategoryValue" @blur="amendCategory"
						@keyup.enter="amendCategory"></a-input>
				</div>
				<div style="display: inline-block;" v-else title="双击修改名称" @dblclick="redact(text,record)">
					{{text}}
				</div>
			</template>

			<template v-slot:pid="{text}">
				<div style="display: inline-block;">
					{{text}}
				</div>
			</template>


			<template v-slot:operation="{record}">
				<a-space>
					<a-button type="primary" @click="addCategory(record)">添加</a-button>
					<a-button @click="editCategory(record)">修改</a-button>
					<a-popconfirm v-if="treeData.length" title="是否确认删除?" cancelText="取消" okText="确认" okType="danger"
						@confirm="deleteCategory(record.cid)">
						<a-button type="primary" danger>删除</a-button>
					</a-popconfirm>
				</a-space>
			</template>
		</a-table>
	</div>
</template>

<script>
	import {
		warning,
		success
	} from '@/antd'
	import {
		mapGetters
	} from 'vuex'
	import BookmarksClassEdit from '../../components/BookmarksClassEdit.vue'

	export default {
		name: "BookmarksClassList",
		data() {
			return {
				visible: false,
				editBookmarksCategory: {},
				editableData: {},
				dataText: '',
				currentData: {},
				columns: [{
						title: '类别名称',
						dataIndex: 'title',
						width: '60%',
						slots: {
							customRender: 'title',
						},
					},
					{
						title: '父级ID',
						dataIndex: 'pid',
						slots: {
							customRender: 'pid',
						}
					}, {
						title: '操作',
						dataIndex: 'operation',
						width: '20%',
						slots: {
							customRender: 'operation',
						},
					}
				],
				rowSelection: {
					checkStrictly: false,
					onChange: (selectedRowKeys, selectedRows) => {
						console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
					},
					onSelect: (record, selected, selectedRows) => {
						console.log(record, selected, selectedRows);
					},
					onSelectAll: (selected, selectedRows, changeRows) => {
						console.log(selected, selectedRows, changeRows);
					},
				}
			}
		},
		components: {
			BookmarksClassEdit
		},
		methods: {
			editCategory(record) {
				this.visible = true;
				this.editBookmarksCategory = {...record}
			},
			amendCategoryValue(e) {
				this.editableData.title = e.target.value
			},
			amendBookmarksCategory(data){
				const promise = new Promise((resolve)=>{
					if(Object.keys(data).length){
						this.editableData = {
							classId: data.cid,
							...data
						}
						resolve()
					}
				})
				promise.then(()=>{
					this.amendCategory()
				})
			},
			amendCategory() {
				this.$store.dispatch('amendCategory', this.editableData)
					.then(() => {
						this.dataText = -1
						success('修改成功')
					})
					.catch((err) => {
						this.dataText = -1
						warning(err)
					})
			},
			redact(text, record) {
				this.dataText = text
				this.editableData = {
					classId: record.cid,
					...record
				}
			},
			addCategory(currentData) {
				if (currentData instanceof PointerEvent) {
					this.currentData = {
						cid: 0,
						title: '顶级分类'
					}
				} else {
					this.currentData = {
						...currentData
					}
					if (this.currentData.children) {
						delete this.currentData.children
					}
				}

				this.$router.push({
					name: 'BookmarksClassAdd',
					query: {
						...this.currentData
					}
				})
			},
			deleteCategory(classId) {
				this.$store.dispatch('deleteCategory', classId)
					.then(() => {
						success('删除成功')
					})
					.catch((err) => {
						warning(err)
					})
			}
		},
		computed: {
			...mapGetters(['treeData'])
		},
		created() {
			if (!this.treeData.length) {
				this.$store.dispatch('userList').catch((err) => warning(err))
			}
		}
	}
</script>

<style lang="scss" scoped>

</style>
